<template>
    <el-form :inline="true" :model="cForm" class="demo-form-inline" :disabled="!isShowList">
        <el-form-item label="一级分类">
            <!-- select 标签中绑定的v-model 就是他的value 中，也就是option 的value-->
            <el-select v-model="cForm.category1Id" placeholder="活动区域" @change="changeCategory1(cForm.category1Id)">
            <el-option :label="category.name" :value="category.id" v-for="category in category1List"></el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="二级分类">
            <el-select v-model="cForm.category2Id" placeholder="活动区域" @change="changeCategory2(cForm.category2Id)">
            <el-option :label="cate2.name" :value="cate2.id" v-for="cate2 in category2List"></el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="三级分类">
            <el-select v-model="cForm.category3Id" placeholder="活动区域" @change="changeCategory3(cForm.category3Id)">
            <el-option :label="cate3.name" :value="cate3.id" v-for="cate3 in category3List"></el-option>
            </el-select>
        </el-form-item>      
</el-form>
 
</template>

<script>
export default {
  name:"categortList",
  prpps:["isShowList"],
  components: {},
  data() {
    return {
        cForm:{
            category1Id:"",
            category2Id:"",
            category3Id:"",
        },
        category1List:[],
        category2List:[],
        category3List:[],

    };
  },
  computed: {},
  methods: {
    async getCategory(id){
       
        
        const {code,data } = await this.$api.category.getCategory1()
        if(code === 200){
            this.category1List = data
        }
    },
    async changeCategory1(id){
         // 重新选择一级分类后，重置二三
       
        this.cForm.category2Id ="";
        this.cForm.category3Id ="";
        this.category2List=[];
        this.category3List=[];
       
        const {code,data } = await this.$api.category.getCategory2(id)
        if(code === 200){
           this.category2List = data
           this.$emit("changeCategory",{id,index:1})
        }
        console.log( this.category2List)
    },
    async changeCategory2(id){
         // 重置三级列表
        this.cForm.category3Id ="";
        this.category3List=[];

        const {code,data } = await this.$api.category.getCategory3(id)
        if(code === 200){
            this.category3List = data
            this.$emit("changeCategory",{id,index:2})
        }
    },
    changeCategory3(id){
        console.log(id)
        this.$emit("changeCategory",{id,index:3})
    }
  },
  async mounted(){
    await this.getCategory()
    
  }
};
</script>
<style scoped>
</style>